<template>
<div class="loginBox">
  <div class="Fixing">
    <!--左侧图片-->
    <div style="display:inline-block">
      <img width="400px;" src="../../image/auth.png" alt="">
    </div>
    <!--右侧输入框-->
    <div class="textBox" style="display:inline-block">
      <h2 style="margin-left: 70px;">欢迎登录</h2>

      <el-form :model="form" status-icon :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>  
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onLogin2">登陆</el-button>
          <el-button type="primary" @click="onLogin">管理员</el-button>
          <el-button type="primary" @click="onSubmit">注册</el-button>
        </el-form-item>
      </el-form>

      <!-- <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onLogin">登陆</el-button>
          <el-button type="primary" @click="onSubmit">注册</el-button>
        </el-form-item>
      </el-form> -->
    </div>
  </div>
<!--<router-view/>-->
</div>
</template>

<script>
// import {mapState} from 'vuex'
  export default {
    name:'login',
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          // if (this.form.checkPass !== '') {
          //   this.$refs.form.validateField('checkPass');
          // }
          callback();
        }
      };
      var validateName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入姓名'));
        } else {
          callback();
        }
      };
      return {
        // ruleForm: {
        //   pass: '',
        //   checkPass: '',
        //   age: ''
        // },
        rules: {
          password: [
            { validator: validatePass, trigger: 'blur' }
          ],
          name: [
            { validator: validateName, trigger: 'blur' }
          ],
        },
        form: {
          name: '',
          password:'',
          // pass:''
        }
      };

    },
    methods: {


      onSubmit(){
      // console.log(this.$store);
      this.$router.push('regist')
      
    },
      async onLogin(){
        const data = await this.aPost ('/user/login',{
        username: this.form.name,
        password: this.form.password
      });
      console.log(data.user);
      // localStorage.setItem('temp',JSON.stringify(data.user))
      this.$store.dispatch('action1',data.user)
      // console.log(data.user._id);
      this.$router.push('management')
      },
      async onLogin2(){
        const data = await this.aPost ('/user/login',{
        username: this.form.name,
        password: this.form.password
      });
      console.log(data.user);
      // localStorage.setItem('temp',JSON.stringify(data.user))
      this.$store.dispatch('action1',data.user)
      // console.log(data.user._id);
      this.$router.push('user')
      }
    
    }
    
  }
</script>
<style scoped>
  .loginBox{
    width: 900px;
    height: 600px;
    margin: 50px auto;
    box-shadow: 0px 0px 20px rgba(33,33,33,.2);
    
  }
  .textBox{
    width: 400px;
    height: 300px;
    display: flex; 
    justify-content: center; 
    align-items: center; 
    justify-content: center;
  }
  .Fixing{
    width: 900px;
    height: 600px;
    display: flex; 
    justify-content: center; 
    align-items: center; 
    justify-content: center;
  }
</style>